import styled from 'styled-components'

export const PlayCardContainer = styled.div.attrs(({ title, theme }) => {
	return {
		title,
		...theme,
	}
})`
	width: 60%;
	display: flex;
	position: relative;
	justify-content: center;
	flex-wrap: wrap;
	margin: auto;
	.title {
		width: 100%;
	}
	&:before {
		width: 100%;
		color: ${(props) => props.textColor};
		padding: .625rem 0rem;
		text-align: center;
		font-size:.425rem;
		content: '${(props) => props.title}';
		display: block;
	}
	@media screen and (max-width: 60rem) {
		& {
			width: 100%;
		}
	}
`

export const PlayCardItem = styled.div.attrs(({ theme }) => {
	return theme
})`
	display: inline-block;
	/* border: .3rem solid ${(props) => props.contentBackgroundColor}; */
	width: 16%;
	margin:.2rem;
	box-shadow: 0rem 0rem 1.375rem -0.1875rem rgba(168, 115, 115, 0.53);
	-webkit-box-shadow: .0625rem .5rem 1.375rem -0.1875rem -0.4375rem .5rem 1.375rem -0.0625rem rgb(168 115 115 / 53%);
	-moz-box-shadow: -0.4375rem .5rem 1.375rem -0.0625rem rgb(168 115 115 / 53%);
	border-radius: .175rem;
	cursor: pointer;
	position: relative;
	.cover-container {
		//歌单封面
		position: relative;
		.cover-image {
			//歌单封面图片
			width: 100%;
			object-fit: cover;
			position: relative;
		}
		&:hover {
			.hover-play-icon {
				display: flex;
			}
		}
		.hover-play-icon {
			//悬浮icon
			display: none;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.6);
			width: 100%;
			height: 99%;
			position: absolute;
			z-index: 1;
			left: 0;
			top: 0;
			font-size:1.3rem;
			svg {
				&:hover {
					color: #f00ff0;
				}
			}
		}
	}
	p.name {
		//歌单标题
		cursor: pointer;
		text-align: center;
		overflow: hidden;
		font-size:.2rem;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		&:hover {
			//歌单标题 hover 字体颜色改变的效果！
			color: ${(props) => props.activeTextColor};
		}
	}
	//歌单的收听详情
	.listenInfo {
		//歌单总计
		padding: .2125rem .375rem;
		box-sizing: border-box;
		width: 100%;
		position: absolute;
		font-size:.28rem;
		text-align:left ;
		top: 0;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		.count {
			margin: 0rem 3.2px;
		}
	}
	&:hover {
		.playIcon {
			opacity: 1;
		}
		&::after {
			display: block;
		}
	}
	@media screen and (max-width: 980px) {
		& {
			width: 33.33%;
			object-fit: cover;
			margin: 1.6px 0rem;
			box-sizing: border-box;
		}
	}
`
